<template>
    <div :id="id" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
type EChartsOption = echarts.ComposeOption<
  GridComponentOption | PieSeriesOption | LegendComponentOption | TitleComponentOption
  |ToolboxComponentOption |TooltipComponentOption
>;
const props = defineProps({
    id: {
        type: String,
        default: "pie" 
    },
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById(props.id);
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            show: false,
            text: '',
            textStyle: {
                fontSize: 16,
                color: '#ffffff'
            },
            left: 15
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
            }
        },
        legend: {
            show: false,
            data: []
        },
        toolbox: {
            show: false,
            feature: {
            saveAsImage: {}
            }
        },
        grid: {
            top: 10,
            left: 10,
            right: 10,
            bottom: 5,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: props.data.xAxisDataList,
            axisLabel: {
                show: true,
                color: '#1793df',
                formatter: function (value) { return value; }
            },
            splitLine:{show: true, lineStyle:{color: '#183c6d'}},
        }],
        yAxis: {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
                show: true,
                color: '#1793df'
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: '#183c6d'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#183c6d'
                }
            },
            splitLine:{show: true, lineStyle:{color: '#183c6d'}},
        },
        series: [
            {
            name: '订单量',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgba(203,199,99,.8)'
                },
                {
                    offset: 1,
                    color: 'rgb(203,199,99, .1)'
                }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: props.data.seriesDataList
            }
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>